<template>
  <div>
    <section>
      <h2>正在进行 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <li
          v-for="(value, index) in arr"
          :key="index"
          v-if="value.checked == false"
        >
          <span>
            <input type="checkbox" v-model="value.checked" />
          </span>
          <span @click="shuangji(index)"
            >{{ value.name }}
            <input
              type="text"
              class="inp"
              v-if="bool"
              @keyup="jianpan1"
              v-model="val1"
            />
          </span>
          <span @click="shan(index)">删除</span>
        </li>
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <li v-for="(value, index) in arr" :key="index" v-if="value.checked">
          <span>
            <input type="checkbox" v-model="value.checked" />
          </span>
          <span>{{ value.name }}</span>
          <span @click="shan(index)">删除</span>
        </li>
      </ul>
    </section>
  </div>
</template>
<style>
.inp {
  position: relative;
  margin-left: -15px;
}
</style>
<script>
export default {
  props: ["arr"],
  data() {
    return {
      arr: [],
      val: "",
      list: "",
      bool: false,
      inp: '<input type="text" v-if="bool">',
      val1: "",
      msg: "",
    };
  },
  methods: {
    jianpan() {
      this.$emit("jianpan");
    },
    shan() {
      this.$emit("shan");
    },
  },
};
</script>
